<template>
  <div class="contact flex_center">
    <div class="box">
      <div class="title">
        <span>联系方式</span>
        <span>CONTACT</span>
      </div>
      <div class="content">
        <div class="flex_column">
          <span class="bold">宅家时光</span>
          <span class="thin">中国*浙江</span>
          <span class="thin" style="marginBottom:2em">杭州市西湖区天目山路888号文二路与天目山路交叉口</span>

          <span>周一 - 周日</span>
          <span>上午 9:00-12:00</span>
          <span>下午 13:00-17:00</span>
        </div>
        <div class="flex_column">
          <span>邮箱：zhajiashiguang@163.com</span>
          <span>微信：zhaijiashiguan</span>
          <span v-if="visible==true">电话：0571-1234567 12345678901</span>

          <CustomBotton content="获取电话" style="marginTop:1em;textAlign:center" @getinfo="visible=true" v-if="buttonVisible"/>
          <span style="marginTop:2em;textAlign:center">
            请输入你的联系方式：<input type="text" v-model="contact">
          </span>
          <CustomBotton :content="buttonValue" style="marginTop:1em;textAlign:center" @getinfo="postinfo"/>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import CustomBotton from '../components/button.vue'
import axios from 'axios'
export default {
  components:{
        CustomBotton
    },
  data(){
    return{
      visible:false,
      buttonVisible:true,
      contact:''
    }
  },
  methods:{
    postinfo(){
      console.log('ok',this.contact)
      let apiKey='DCWZSqQ22fdee034ec0011d7a30fdb2783537a30f652d25'
      // 这是网上接口 可免费用30次
      axios.get(`https://api.apishop.net/common/aphorism/queryAphorismTitleList?apiKey=${apiKey}&type=1`)
      .then((data)=>{
        let res=data.data
        if(res.statusCode=='000000'){
          alert('发送成功')
        }
      })
    }
  },
  watch:{
    visible(val){
      if(val){
        this.buttonVisible=false
      }
    }
  },
  computed:{
    buttonValue(){
      if(this.contact==''){
        return '请输入'
      }
      return '发送'
    }
  }
}
</script>

<style lang="less" scope>
.contact{
  background-image: url('../assets/img9.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .box{
    background: white;
    opacity: .9;
    width: 60%;
    padding: 1em;
    border-radius: 2em;
  }
  .content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 6em;
    padding: 2em 4em;
    .flex_column span{
      line-height: 1.8em;
    }
  }
}
</style>
